<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生注册界面</title>
    <!--semantic-ui-->
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" >
    <!--    用来解决type="file"的样式-->
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

    <!--    一定需要引入这个包-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


    <style>
        body{
            background-image: url("/images/stulogin.jpg");
            height: 100%;
            width: 100%;
            background-size: cover;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!--菜单-->
<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item"><a th:href="@{/community/index}" style="font-size: 20px">主页面</a></li>
    <li class="layui-nav-item "><a th:href="@{/login}" style="font-size: 20px">登录</a></li>
    <li class="layui-nav-item layui-this"><a th:href="@{/register}" style="font-size: 20px">注册</a></li>
<!--    <li class="layui-nav-item"><a th:href="@{/teacherregister}" style="font-size: 20px">教师注册</a></li>-->
</ul>
<!--菜单-->
<br>

<!--注册界面-->
<!--<div class="modal-dialog modal-lg">-->
    <div >

        <form id="registerform" class="layui-form" method="post" th:action="@{/registersubmit}" enctype="multipart/form-data">

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required  lay-verify="required|username" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">Birth</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="birth" lay-verify="required" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" required lay-verify="required|email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <a href="javascript:;" class="file">上传头像
                        <input type="file" name="images" required lay-verify="required|image" autocomplete="off" id="user-image">
                    </a>
                </div>
                <!-- 显示图像预览 -->
                <img style="width: 180px;height: 180px;" class="ui medium circular image" id="img">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-inline">
                    <select name="class_id"  lay-verify="required" lay-search="">
                        <option th:each="class:${classtypes}" th:value="${class.getId()}" th:text="${class.getClass_name()}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn"  lay-submit lay-filter="formDemo">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <h1 class="ui blue dividing header">学生注册</h1>
        </form>
    </div>
<!--    </div>-->
<!--注册界面-->

<script>
    $(function(){
        //上传图像预览
        $('#user-image').on('change',function() {
            $('#img').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    });


    layui.use('form', function(){
        var form = layui.form;

        form.verify({
            //将用户名是否可用作为验证条件 表单提交时触发
            username:function (value) {
            var datas={username: value};
            var message='';

            $.ajax({
                type: "POST",
                url:'/checkusername',
                async: false, //改为同步请求
                contentType:'application/json;charset=UTF-8',
                data:JSON.stringify(datas),
                dataType:'json',
                success:function (data) {
                    if (data){

                    }else {
                        message="用户名已存在，请重新输入"
                    }

                }
            });
//需要注意 需要将返回信息写在ajax方法外
                if (message !== '')
                    return message;
            },
            image: function (value, item) {
                if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
                    return '图片格式错误';
                }
            }

        });
        //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
    });

    $(document).ready(function () {
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1'
                ,type: 'date'//指定元素
            });
        });
    })



</script>
</body>
</html>